<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<script src="../js/mui.min.js"></script>
		<script src="../js/echarts.min.js"></script>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/asd.css" rel="stylesheet" />
		<style>
			.chart {
				height: 250px;
				margin: 0px;
				padding: 0px;
				margin-top: -30px;
			}

			.chartOne {
				width: 400px;
				height: 300px
				
			}

			h5 {
				margin-top: 30px;
				font-weight: bold;
			}

			h5:first-child {
				margin-top: 15px;
			}
		</style>
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
	</head>
	<body>
		<div class="app0">
			<div style="position: absolute;">

				<div style="margin-top: -10px;">
					<div class="chartOne" id="pieChart"></div>
				</div>

				<div class="app">

					<button type="button" class="mui-btn mui-btn-outlined" style="border-radius: 30px;">
						应还金额
					</button>
					<br><br />
					<button type="button" class="mui-btn mui-btn-outlined" style="border-radius: 30px;">
						本月应还
					</button>

				</div>
				<div class="app1">
					<button type="button" class="mui-btn mui-btn-outlined" style="border-radius: 30px;">
						申请借款
					</button>
				</div>

			</div>

			<div style=" height: 210px;margin-top: 315px;">
				<div class="mui-content-padded">

					<h5>个人信用</h5>
					<div class="chart" id="lineChart"></div>

				</div>
			</div>

			<div style="background-color: #333333; margin-top: 15px;">
				<ul class="mui-table-view mui-table-view-chevron">
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="#">
							充值余额
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="#">
							还款记录
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="#">
							借款历史
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="#">
							提高信用
						</a>
					</li>
					<li class="mui-table-view-cell">
						<a class="mui-navigate-right" data-title-type="native" href="#">
							借款须知
						</a>
					</li>
				</ul>
			</div>

		</div>
		<script>
			var chartOption = {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: [150, 230, 224, 218, 135, 147, 260],
						type: 'line'
					}]
				}
			var option = {
				series: [{
					type: 'gauge',
					startAngle: 180,
					endAngle: 0,
					min: 0,
					max: 200,
					splitNumber: 4,
					itemStyle: {
						color: '#58D9F9',
						shadowColor: 'rgba(0,138,255,0.45)',
						shadowBlur: 10,
						shadowOffsetX: 2,
						shadowOffsetY: 2
					},
					progress: {
						show: true,
						roundCap: true,
						width: 18
					},
					pointer: {
						icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
						// 指针
						length: '75%',
						width: 10,
						offsetCenter: [0, '5%']
					},
					// 刻度离圈的距离
					axisLine: {
						roundCap: true,
						lineStyle: {
							width:5
						}
					},
					// 刻度的粗细
					axisTick: {
						splitNumber: 2,
						lineStyle: {
							width: 2,
							color: '#999'
						}
					},
					// 长刻度的长度
					splitLine: {
						length: 10,
						lineStyle: {
							width: 3,
							color: '#999'
						}
					},
					// 表盘字体
					axisLabel: {
						distance: 18,
						color: '#999',
						fontSize: 20
					},
					title: {
						show: false
					},
					// 下方数字框
					detail: {
						// backgroundColor: '#fff',
						// borderColor: '#999',
						borderWidth: 1,
						width: '160%',
						lineHeight: 0,
						height: 20,
						borderRadius: 8,
						offsetCenter: [0, '30%'],
						valueAnimation: true,
						formatter: function (value) {
						    return '{unit|剩余额度：'+ value.toFixed(0) + '}';
						},
						rich: {
							value: {
								fontSize: 20,
								fontWeight: 'bolder',
								color: '#777'
							},
							unit: {
								fontSize: 18,
								color: '#636262',
								padding: [0, 0, -20, 10]
							}
						}
					},
					data: [{
						value: 200
					}]
				}]
			};
			var byId = function(id) {
				return document.getElementById(id);
			};
			var lineChart = echarts.init(byId('lineChart'));
			lineChart.setOption(chartOption);
			var pieChart = echarts.init(byId('pieChart'));
			pieChart.setOption(option);

		</script>

	</body>
</html>
